<header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <a class="navbar-brand" href="{{'app_repo_url' | translate}}" target="_blank" rel="noopener">
            <img src="/assets/icons/icon-192x192.png" width="30" height="30" class="d-inline-block align-top" alt="Logo">
            {{'app_title'
            | translate}}
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" (click)="toggleMenu()"
            [attr.aria-expanded]="!isCollapsed">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngbCollapse]="isCollapsed">
            <!-- left menu -->
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
                        {{'app_nav_home' | translate}}
                    </a>
                </li>

                <li class="nav-item dropdown">
                    <div ngbDropdown class="d-inline-block">
                        <a href="javascript:void(0);" class="nav-link" id="dropdownBasic3" ngbDropdownToggle>{{'app_nav_examples'
                            | translate}}</a>
                        <div ngbDropdownMenu aria-labelledby="dropdownBasic3">
                            <a *ngFor="let route of exampleRoutes" routerLink="examples/{{route.path}}" class="dropdown-item">{{route.data.displayText}}</a>
                        </div>
                    </div>
                </li>

            </ul>

            <!-- right menu -->
            <ul class="navbar-nav ml-auto">
                <!-- language dropdwon -->
                <li class="nav-item dropdown">
                    <div ngbDropdown class="d-inline-block">
                        <a href="javascript:void(0);" class="nav-link" id="dropdownBasic2" ngbDropdownToggle>{{currentCulture?.text}}</a>
                        <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
                            <form *ngFor="let c of cultures" action="/api/setlanguage" method="post" class="culture-form"
                                ngNoForm [class.active]="c.current">
                                <button id={{c.value}} name="culture" value={{c.value}} type="submit" class="dropdown-item">{{c.text}}</button>
                            </form>
                        </div>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="javascript:void(0);" (click)="profile()" *ngIf="isLoggedIn">{{user?.profile.email}}</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" (click)="logout()" href="javascript:void(null);" *ngIf="isLoggedIn">
                        {{'app_nav_logout' | translate}}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" (click)="register()" href="javascript:void(0);" *ngIf="!isLoggedIn">
                        {{'app_nav_register' | translate}}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" (click)="login()" href="javascript:void(0);" *ngIf="!isLoggedIn">
                        {{'app_nav_login' | translate}}
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</header>